<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <%--<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>--%>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
    <style>
        ::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>
<body>
<%--头部--%>
<div class="container mt-3">
    <br>
    <div class="card shadow">
        <div class="card-header">搜索</div>
        <div class="card-body">
            <div style="display: inline-block"><label for="attribute">&nbsp;&nbsp;字段:</label></div>
            <div style="display: inline-block">
                <select class="form-select" id="attribute" name="attribute" style="box-shadow:none">
                    <option>工号</option>
                    <option>姓名</option>
                    <option>职位</option>
                    <option>部门</option>
                </select>
            </div>
            <div style="display: inline-block"><label style="white-space:nowrap" for="value">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;值:</label></div>
            <div style="display: inline-block"><input style="white-space:nowrap;box-shadow: none" type="text" class="form-control" id="value"></div>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button s type="button" id="select" class="btn btn-outline-success" style="box-shadow:none"><i class="fa fa-search" style="font-size:18px"></i>&nbsp;搜索</button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button type="button" id="add_button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#myModal-add" style="box-shadow:none"><i class="fa fa-user-plus" style="font-size: 18px"></i>&nbsp;添加职工</button>
        </div>
    </div>
</div>

<%--表格--%>
<div class="container mt-3">
    <div>&nbsp;</div>
    <table id="table" class="table table-hover" style="text-align: center">
        <thead>
        <tr>
            <th style="width: 72px">工号(ID)</th>
            <th style="width: 56px">姓名</th>
            <th style="width: 43px">性别</th>
            <th style="width: 45px">年龄</th>
            <th style="width: 120px">手机号码</th>
            <th style="width: 68px">所属部门</th>
            <th style="width: 102px">职位</th>
            <th style="width: 76px">工资</th>
            <th style="width: 116px">操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${staffs}" var="staff">
            <tr name="tr">
                <td style="display:table-cell; vertical-align:middle">${staff.id}</td>
                <td style="display:table-cell; vertical-align:middle">${staff.name}</td>
                <td style="display:table-cell; vertical-align:middle">${staff.sex}</td>
                <td style="display:table-cell; vertical-align:middle">${staff.age}</td>
                <td style="display:table-cell; vertical-align:middle">${staff.phone}</td>
                <td style="display:table-cell; vertical-align:middle">${staff.dept}</td>
                <td style="display:table-cell; vertical-align:middle">${staff.position}</td>
                <td style="display:table-cell; vertical-align:middle">${staff.salary}</td>
                <td style="display:table-cell; vertical-align:middle">
                    <button url="{'id':'${staff.id}','name':'${staff.name}','sex':'${staff.sex}','age':'${staff.age}','phone':'${staff.phone}','dept':'${staff.dept}','position':'${staff.position}','salary':'${staff.salary}'}"
                            type="button" style="box-shadow:none" class="btn btn-outline-primary edit" data-bs-toggle="modal" data-bs-target="#myModal-update">编辑</button>
                    <button url="http://localhost:8080/web/staff/delete?id=${staff.id}"
                            type="button" style="box-shadow:none" class="btn btn-outline-danger delete" data-bs-toggle="modal" data-bs-target="#myModal-delete">删除</button>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>

<%--分页--%>
<div class="container mt-3 mx-auto" style="position: absolute;top: 88%;left: 42%" id="page">
    <ul class="pagination">
        <li class="page-item"><a class="page-link" style="box-shadow:none;cursor:pointer" id="previous"><i class="fa fa-angle-left" style="font-size:24px"></i></a></li>
        &nbsp;&nbsp;
        <li class="page-item page_num active"><a class="page-link num_page" style="box-shadow:none" href="#" id="1">1</a></li>
        <c:forEach var="i" begin="2" end="${size}">
            <li class="page-item page_num"><a class="page-link num_page" style="box-shadow:none" href="#" id="${i}">${i}</a></li>
        </c:forEach>
        &nbsp;&nbsp;
        <li class="page-item"><a class="page-link" style="box-shadow:none;cursor:pointer" id="next"><i class="fa fa-angle-right" style="font-size:24px"></i></a></li>
    </ul>
</div>

<%--添加员工信息*模态框*--%>
<div class="modal fade" id="myModal-add">
    <div class="modal-dialog" style="width: 800px">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">添加职工信息</h4>
                <button id="add_close" type="button" style="box-shadow:none" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!-- 模态框内容 -->
            <div class="modal-body" style="height: 355px;width: 500px">
                <div class="container-fluid">
                    <form class="row g-3" action="" method="post">
                        <div class="col-md-1"></div>
                        <div class="col-md-5">
                            <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fa fa-vcard-o" style="font-size:24px;color: rgba(0,0,0,0.65)"></i></span>
                                <input type="text" class="form-control" id="add-id" name="add-id" placeholder="工号" style="box-shadow:none">
                            </div>
                        </div>
                        <div class="col-md-6"></div>
                        <div class="col-md-1"></div>
                        <div class="col-md-5">
                            <div class="input-group mb-3">
                                <span class="input-group-text">姓名</span>
                                <input type="text" class="form-control" id="add-name" style="box-shadow:none">
                            </div>
                        </div>
                        <div class="col-md-1"></div>
                        <div class="col-md-4">
                            <div class="input-group mb-3">
                                <span class="input-group-text">性别</span>
                                <select id="add-sex" class="form-select" style="box-shadow:none">
                                    <option selected style="display: none"></option>
                                    <option>女</option>
                                    <option>男</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-1"></div>
                        <div class="col-md-1"></div>
                        <div class="col-md-4">
                            <div class="input-group mb-3">
                                <span class="input-group-text">年龄</span>
                                <input type="text" class="form-control" id="add-age" style="box-shadow:none">
                            </div>
                        </div>
                        <div class="col-md-1"></div>
                        <div class="col-md-5">
                            <div class="input-group mb-3">
                                <span class="input-group-text">部门</span>
                                <select id="add-dept" class="form-select" style="box-shadow:none"></select>
                            </div>
                        </div>
                        <div class="col-md-1"></div>
                        <div class="col-md-1"></div>
                        <div class="col-md-10">
                            <div class="input-group mb-3">
                                <span class="input-group-text">手机号码</span>
                                <input type="text" class="form-control" id="add-phone" style="box-shadow:none">
                            </div>
                        </div>
                        <div class="col-md-1"></div>
                        <div class="col-md-1"></div>
                        <div class="col-md-4">
                            <div class="input-group mb-4">
                                <span class="input-group-text">工资</span>
                                <input type="text"  class="form-control" id="add-salary" placeholder="元/月" style="box-shadow:none">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group mb-3">
                                <span class="input-group-text">职位</span>
                                <select id="add-position" class="form-select" style="box-shadow:none">
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" id="add_ok" style="box-shadow:none" class="btn btn-outline-primary">确定</button>
            </div>

        </div>
    </div>
</div>

<%--编辑*模态框*--%>
<div class="modal fade" id="myModal-update">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">编辑员工信息</h4>
                <button type="button" id="update-close" style="box-shadow:none" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!-- 模态框内容 -->
            <div class="modal-body" style="height: 355px">
                <div class="container-fluid">
                    <form class="row g-3">
                        <div class="col-md-1"></div>
                        <div class="col-md-5">
                            <div class="input-group mb-3">
                                <span class="input-group-text"><i class="fa fa-vcard-o" style="font-size:24px;color: rgba(0,0,0,0.65)"></i></span>
                                <input type="text" class="form-control" id="update-id" style="box-shadow:none;background-color: white" readonly>
                            </div>
                        </div>
                        <div class="col-md-6"></div>
                        <div class="col-md-1"></div>
                        <div class="col-md-5">
                            <div class="input-group mb-3">
                                <span class="input-group-text">姓名</span>
                                <input type="text" class="form-control" style="box-shadow:none" id="update-name">
                            </div>
                        </div>
                        <div class="col-md-1"></div>
                        <div class="col-md-4">
                            <div class="input-group mb-3">
                                <span class="input-group-text">性别</span>
                                <select id="update-sex" class="form-select" style="box-shadow:none">
                                    <option selected style="display: none"></option>
                                    <option>女</option>
                                    <option>男</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-1"></div>
                        <div class="col-md-1"></div>
                        <div class="col-md-4">
                            <div class="input-group mb-3">
                                <span class="input-group-text">年龄</span>
                                <input type="text" class="form-control" id="update-age" style="box-shadow:none">
                            </div>
                        </div>
                        <div class="col-md-1"></div>
                        <div class="col-md-5">
                            <div class="input-group mb-3">
                                <span class="input-group-text">部门</span>
                                <select class="form-select" id="update-dept" style="box-shadow:none"></select>
                            </div>
                        </div>
                        <div class="col-md-1"></div>
                        <div class="col-md-1"></div>
                        <div class="col-md-10">
                            <div class="input-group mb-3">
                                <span class="input-group-text">手机号码</span>
                                <input type="text" class="form-control" id="update-phone" style="box-shadow:none">
                            </div>
                        </div>
                        <div class="col-md-1"></div>
                        <div class="col-md-1"></div>
                        <div class="col-md-4">
                            <div class="input-group mb-4">
                                <span class="input-group-text">工资</span>
                                <input type="text" style="font-size: 14px;box-shadow: none" class="form-control" id="update-salary" placeholder="元/月" style="box-shadow:none">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group mb-3">
                                <span class="input-group-text">职位</span>
                                <select class="form-select" id="update-position" style="box-shadow:none"></select>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" id="ok-edit" style="box-shadow:none" class="btn btn-outline-primary">确定</button>
            </div>
        </div>
    </div>
</div>

<%--删除*模态框*--%>
<div class="modal fade" id="myModal-delete">
    <div class="modal-dialog" style="width: 450px;position: absolute;top: 26%;left: 35%">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                提醒<button id="close-delete" style="box-shadow:none" type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <!-- 模态框内容 -->
            <div class="modal-body" style="text-align: center">
                <h5>您确定要删除该员工的信息吗</h5>
            </div>
            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button id="ok-delete" type="button" style="box-shadow:none" class="btn btn-outline-primary">确定</button>&nbsp;&nbsp;&nbsp;&nbsp;
                <button id="cancel-delete" type="button" style="box-shadow:none" class="btn btn-outline-primary">取消</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
        </div>
    </div>
</div>

<%--信息提示框--%>
<div class="alert alert-success fade show" id="success" style="text-align:center;width: 360px;position: absolute;left: 590px;top: 18px;display: none">
    <strong>成功!</strong>
</div>
<div class="alert alert-warning fade show" id="warning" style="text-align:center;width: 300px;position: absolute;left: 600px;top: 34px;display: none;z-index: 2000">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <strong>警告!</strong>
</div>
<div class="alert alert-danger fade show" id="danger" style="text-align:center;width: 300px;position: absolute;left: 600px;top: 14px;display: none;z-index: 2000">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <strong>次要的!</strong>
</div>
</body>
<script>
    //实时获取--下拉框获取部门名称
    function getDeptName(){
        $.ajax({
            url:"http://localhost:8080/web/dept/name",
            type:'get',
            async:false,
            data:{},
            dataType:'json',
            success:function (resp){
                $('#update-dept,#add-dept').empty()
                let style="<option selected style='display: none'></option>"
                for (let i = 0; i < resp.length; i++) {
                    style+="<option>"+resp[i]+"</option>"
                }
                $('#update-dept,#add-dept').append(style)
            }
        })
    }
    //实时获取--职位下拉框
    $('#update-dept,#add-dept').click(function (){
        let department
        if($(this).attr('id')=="update-dept"){
            department=$('#update-dept').val()
        }else{
            department=$('#add-dept').val()
        }
        getPositionName(department)
    })
    function getPositionName(department){
        $.ajax({
            url:"http://localhost:8080/web/position/name",
            type:'get',
            async:false,
            data:{dept:department},
            dataType:'json',
            success:function (resp){
                $('#update-position,#add-position').empty()
                let style="<option selected style='display: none'></option>"
                for (let i = 0; i < resp.length; i++) {
                    style+="<option>"+resp[i]+"</option>"
                }
                $('#update-position,#add-position').append(style)
            }
        })
    }
    //构造页码框
    function construct_page(number){
        $('#page').empty()
        let style="<ul class='pagination''>"+
        "<li class='page-item'><a class='page-link' style='box-shadow:none;cursor:pointer' id='previous'><i class='fa fa-angle-left' style='font-size:24px'></i></a></li>"+
        "&nbsp;&nbsp;"
        for (let i = 1; i <= number; i++) {
            style+="<li class='page-item page_num'><a class='page-link num_page' style='box-shadow:none' href='#' id='"+i+"'>"+i+"</a></li>"
        }
        style+="&nbsp;&nbsp;"+
        "<li class='page-item'><a class='page-link' style='box-shadow:none;cursor:pointer' id='next'><i class='fa fa-angle-right' style='font-size:24px'></i></a></li>"+
        "</ul>"
        $('#page').append(style)
        $('.page_num').eq(number-1).addClass('active')
        trans_page()
    }
    //构造表格
    function construct_table(resp){
        $('#table').empty()
        let style="<thead>"+"<tr>"+
            "<th style='width: 72px'>工号(ID)</th>"+
            "<th style='width: 56px'>姓名</th>"+
            "<th style='width: 43px'>性别</th>"+
            "<th style='width: 45px'>年龄</th>"+
            "<th style='width: 120px'>手机号码</th>"+
            "<th style='width: 68px'>所属部门</th>"+
            "<th style='width: 102px'>职位</th>"+
            "<th style='width: 76px'>工资</th>"+
            "<th style='width: 116px'>操作</th>"+
            "</tr>"+"</thead>"+"<tbody>"
        for (let i = 0; i < resp.length; i++) {
            style+="<tr name='tr'>"+
                "<td style='display:table-cell; vertical-align:middle'>"+resp[i].id+"</td>"+
                "<td style='display:table-cell; vertical-align:middle'>"+resp[i].name+"</td>"+
                "<td style='display:table-cell; vertical-align:middle'>"+resp[i].sex+"</td>"+
                "<td style='display:table-cell; vertical-align:middle'>"+resp[i].age+"</td>"+
                "<td style='display:table-cell; vertical-align:middle'>"+resp[i].phone+"</td>"+
                "<td style='display:table-cell; vertical-align:middle'>"+(typeof(resp[i].dept)=="undefined"?"":resp[i].dept)+"</td>"+
                "<td style='display:table-cell; vertical-align:middle'>"+(typeof(resp[i].position)=="undefined"?"":resp[i].position)+"</td>"+
                "<td style='display:table-cell; vertical-align:middle'>"+resp[i].salary+"</td>"+
                "<td style='display:table-cell; vertical-align:middle'>"+
                "<button url=\"{'id':'"+resp[i].id+"','name':'"+resp[i].name+"','sex':'"+resp[i].sex+"','age':'"+resp[i].age+"','phone':'"+resp[i].phone+"','dept':'"+resp[i].dept+"','position':'"+resp[i].position+"','salary':'"+resp[i].salary+"'}\""+
                "type='button' style='box-shadow:none' class='btn btn-outline-primary edit' data-bs-toggle='modal' data-bs-target='#myModal-update'>编辑</button>&nbsp;"+
                "<button url='http://localhost:8080/web/staff/delete?id="+resp[i].id+"'" +
                "type='button' style='box-shadow:none' class='btn btn-outline-danger delete' data-bs-toggle='modal' data-bs-target='#myModal-delete'>删除</button>"+
                "</td>"+"</tr>"
        }
        style+="</tbody>"
        $('#table').append(style)
        delete_info()
        update_info()
    }
    //实时获取当前总页码
    function getPageSum(){
        $.ajax({
            url:"${pageContext.request.contextPath}/staff/other",
            type:'post',
            async:false,
            data:{other:"page"},
            dataType:'json',
            success:function (resp){
                page_sum=resp.page
            }
        })
    }
    //分页的切换效果
    let page_sum=${size};
    let page_now=0
    trans_page()
    function trans_page(){
        $('#next,#previous,.num_page').click(function (){
            if($(this).attr('id')=="next"){
                page_now++
                if(page_now>(page_sum-1)){
                    page_now=page_sum-1
                }
            }else if($(this).attr('id')=="previous"){
                page_now--
                if(page_now<0){
                    page_now=0
                }
            }else{
                page_now=$(this).attr('id')-1
            }
            $('.page_num').removeClass('active')
            $('.page_num').eq(page_now).addClass('active')
            $.post("${pageContext.request.contextPath}/staff/page",
                {page:page_now+1,select:"no"},
                function (resp){
                    construct_table(resp)
                    delete_info()
                    update_info()
                },"json"
            )
        })
    }
    //检查员工编号是否重复
    function checkId(id){
        let flag=false
        $.ajax({
            url:"${pageContext.request.contextPath}/staff/other",
            type:'post',
            async:false,
            data:{other:"person"},
            dataType:'json',
            success:function (resp){
                for (let i = 0; i < resp.length; i++) {
                    //console.log(resp[i])
                    if(id==resp[i].id){
                        flag=true
                    }
                }
            }
        })
        return flag
    }
    //检查手机号码是否合法
    function checkPhone(phone){
        let regExp=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
        let ok=regExp.test(phone)
        return !ok
    }
    //添加职工信息
    $('#add_button').click(function (){
        getDeptName()
    })
    $('#add_ok').click(function (){
        if($('#add-id').val()==""||$('#add-name').val()==""||$('#add-sex').val()==""||$('#add-age').val()==""||$('#add-dept').val()==""||$('#add-phone').val()==""||$('#add-salary').val()==""||$('#add-position').val()==""){
            $('#warning').show()
            $('#warning').text("请完善信息")
            setTimeout(function (){
                $('#warning').hide()
            },2000)
        }else if(checkId($('#add-id').val())){
            $('#warning').show()
            $('#warning').text("职工编号已存在")
            setTimeout(function (){
                $('#warning').hide()
            },2000)
        }else if(checkPhone($('#add-phone').val())){
            $('#warning').show()
            $('#warning').text("电话号码输入错误")
            setTimeout(function (){
                $('#warning').hide()
            },2000)
        }else{
            //添加职工前
            $.post("${pageContext.request.contextPath}/staff/add",
                {id:$('#add-id').val(),name:$('#add-name').val(),sex:$('#add-sex').val(),age:$('#add-age').val(),dept:$('#add-dept').val(),phone:$('#add-phone').val(),salary:$('#add-salary').val(),position:$('#add-position').val()},
                function (resp){
                    $('#page').show()
                    let former=page_sum
                    getPageSum()
                    let latter=page_sum
                    if(former!=latter){
                        page_now++
                    }
                    construct_table(resp)
                    $('#add_close').click()
                    $('#add-id').val("")
                    $('#add-name').val("")
                    $('#add-sex').val("")
                    $('#add-age').val("")
                    $('#add-dept').val("")
                    $('#add-phone').val("")
                    $('#add-salary').val("")
                    $('#add-position').val("")
                    construct_page(page_sum)
                },"json"
            )
        }
    })
    //删除职工信息
    delete_info()
    function delete_info(){
        $('.delete').each(function (index,element){
            $(element).click(function (){
                let url=$(element).attr('url')
                getPageSum()
                let former=page_sum
                document.getElementById('ok-delete').onclick=function(){
                    $.post(url,{page:page_now+1},
                        function (resp){
                            $('#close-delete').click()
                            getPageSum()
                            let latter=page_sum
                            construct_table(resp)
                            if(former>latter){
                                page_now--
                                construct_page(page_sum)
                            }else{
                                construct_page(page_sum)
                                $('.page_num').removeClass('active')
                                $('.page_num').eq(page_now).addClass('active')
                            }
                        },"json"
                    )
                }
            })
        })
        //删除取消
        $('#cancel-delete').click(function (){
            $('#close-delete').click()
        })
    }
    //修改职工信息
    update_info()
    function update_info(){
        let edits=document.getElementsByClassName('edit')
        for (let i = 0; i < edits.length; i++) {
            edits[i].onclick=function (){
                function replaceAll(str, find, replace){
                    return str.replace(new RegExp(find, 'g'), replace);
                }
                let url = replaceAll($(edits[i]).attr('url'),"\'", "\"");
                let json=JSON.parse(url)
                getDeptName()
                getPositionName(json.dept)
                $('#update-id').val(json.id)
                $('#update-name').val(json.name)
                $('#update-sex').val(json.sex)
                $('#update-age').val(json.age)
                $('#update-dept').val(json.dept)
                $('#update-phone').val(json.phone)
                $('#update-salary').val(json.salary)
                document.getElementById('update-position').value=json.position
                document.getElementById('ok-edit').onclick=function (){
                    if($('#update-name').val()==""||$('#update-sex').val()==""||$('#update-age').val()==""||$('#update-age').val()==""||$('#update-phone').val()==""||$('#update-salary').val()==""||$('#update-position').val()==""){
                        $('#warning').show()
                        $('#warning').text("请完善信息")
                        setTimeout(function (){
                            $('#warning').hide()
                        },2000)
                    }else if(checkPhone($('#update-phone').val())){
                        $('#warning').show()
                        $('#warning').text("电话号码输入错误")
                        setTimeout(function (){
                            $('#warning').hide()
                        },2000)
                    }else{
                        $.ajax({
                            url:"${pageContext.request.contextPath}/staff/update",
                            type:'post',
                            data:{id:$('#update-id').val(),name:$('#update-name').val(),sex:$('#update-sex').val(),age:$('#update-age').val(),dept:$('#update-dept').val(),phone:$('#update-phone').val(),salary:$('#update-salary').val(),position:$('#update-position').val(),page:page_now+1},
                            dataType:'json',
                            success:function (resp){
                                $('#update-close').click()
                                construct_table(resp)
                            }
                        })
                    }
                }
            }
        }
    }
    //查询职工信息
    $('#select').click(function (){
        if($('#value').val()==""){
            $.post("${pageContext.request.contextPath}/staff/other",
                {other:"staffs"},
                function (resp){
                    construct_table(resp)
                    construct_page(page_sum)
                    $('#page').show()
                    page_now=0
                    $('.page_num').removeClass('active')
                    $('.page_num').eq(page_now).addClass('active')
                },"json"
            )
        }else{
            $.post("${pageContext.request.contextPath}/staff/select",
                {key:$('#attribute').val(),value:$('#value').val()},
                function (resp){
                    if(resp.length==0){
                        $('#danger').show()
                        $('#danger').text("未查询到相关结果")
                        setTimeout(function (){
                            $("#danger").fadeToggle("slow")
                        },2000)
                    }else{
                        construct_table(resp)
                        $('#page').hide()
                    }
                },"json"
            )
        }
    })
</script>
</html>
